// const { fstat } = require("fs");

//获取搜索按钮
var searchBtn = document.querySelector('.searchbox .search');
//获取输入框
var inputEle = document.querySelector('.searchbox input');



// 获取用户标签
var user=document.querySelector('header .username')
console.log(user);
//获取localStorage中存储的用户信息
var userinfo=JSON.parse(localStorage.getItem('userinfo'))
//渲染用户信息到首页
document.querySelector('.username').innerHTML=userinfo.name;




//点击搜索按钮, 发起ajax请求, 传参数给服务器端, 服务器端返回搜索的结果
searchBtn.onclick = ()=>{
    axios.get( '/user/search', { params:{ searchkey: inputEle.value  }  } ).then((res)=>{
        render( res.data.list )
        console.log(res.data);
    })
}


//删除==给table-body绑定点击事件(事件委托)
var tablebody=document.querySelector('.table-body')
tablebody.onclick=(e)=>{
    //e.target.tagName=='SPAN' 判断是不是span标签
    //e.target.classList.contains('icon-shanchu')判断是否包含icon-shanchu这个类名
    if(e.target.tagName=='SPAN'&&e.target.classList.contains('icon-shanchu')){
        //先获取这个删除按钮对应用户的手机号，然后再发请求
        // console.log(e.target.dataset.phone);
        axios.post('./user/delete',{phone:e.target.dataset.phone}).then((res)=>{
            console.log(res.data);
            //如果想要在发请求给服务器删除成功之后同时让页面也看到删除后的效果
            //方案一：本地删除这个dom节点
            e.target.parentNode.parentNode.remove()
            //方案二：是让删除接口返回删除后的新数据，本地调用render方法重新渲染
            render(res.data.list)
        })
    }

}













//渲染列表
function render(data){
    var str = ''
    
    str = data.map((item,index)=>{
        return `<ul class="row">
                    <li>${item.email}</li> 
                    <li>${item.name}</li>
                    <li>${item.phone}</li>
                    <li>${item.ingroup}</li>
                    <li>${item.isadmin?'是':'否'}</li>
                    <li class="${item.status?'':'error'}">${item.status?'正常':'异常'}</li>
                    <li>
                        <span class="iconfont icon-bianji editicon" id="101"></span>
                        <span class="iconfont icon-shanchu deleteicon" data-phone="${item.phone}"></span>
                    </li>
                </ul>`
    }).join('')

    if( str == '' ){
        str = '<ul style="text-align:center;color:red">未查询到数据!</ul>'
    }
    document.querySelector('.table .table-body').innerHTML 
    = str ;
}

//axios是从axios.min.js文件中暴露的 用来发送ajax请求的一个对象
axios.get('/user/list', { params: { page:1,count:2 }  } ).then((res)=>{
    //调用render方法, 传入后端返回的数据 渲染列表
    render( res.data.list );
    console.log(res.data);
})

axios.post('/user/login', { phone:'13611129070',pass:'1234' } ).then((res)=>{
    console.log(res.data);
})

// axios.put()
// axios.delete()
